<template>
  <div class="recom">
    <div class="recom-top">
      <span></span>
      热门推荐
    </div>
    <div  class="recom-center">
      <div class="recom-item"
      v-for="(item,index) in items"
      :key="index"
      @click="clickItem(item.id)"
      >
        <img v-lazy="item.pic" alt="">
        <h4>{{item.name}}</h4>
          <p class="desc">
            {{ item.characteristic ? item.characteristic :'暂无描述' | filterDesc }}
          </p>
        <div class="action">
        <span class="xianjia">现价:{{item.minPrice | currency}}</span>
        <!-- <span class="yuanjia">原价:￥{{item.originalPrice}}</span> -->
    <van-icon @click.stop="AddCart(item.id)" class="item-icon"  color="#f66" size="24" class-prefix="icon" name="tianjia"/>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  methods: {
    AddCart (id) {
      this.$emit('AddCartHome', id)
    },
    clickItem (id) {
      this.$emit('deliveryId', id)
    }
  },
  props: {
    // 接收父组件传来的数据
    items: {
      type: Array,
      // 定义了require 必须传参数
      required: true
    }
  },
  filters: {
    filterDesc (v, len = 10) {
      if (v.length > 10) {
        return v.substr(0, len) + '...'
      } else {
        return v
      }
    },
    currency (v, sign = '￥') {
      return sign + v
    }
  }
}
</script>

<style lang="scss" scoped>
.recom-top {
  width: 100%;
  height: 36px;
  line-height: 36px;
  font-size: 20px;
  display: flex;
  align-items: center;
  span {
    display: inline-block;
    width: 8px;
    height: 100%;
    margin-right:8px ;
    background-color:#add;
  }
}
.recom-center {
  background-color: #fff;
  display: flex;
  flex-wrap:wrap;
  justify-content: space-around;
  margin-top: 15px;
  img{
  width: 197px;
  height: 200px;
}
.recom-item{
  border: 1px solid grey;
  padding-bottom: 10px;
  margin: 0px 3px 8px;
 h4{
  padding-left: 10px;
 }
 .desc{
   padding-left: 10px;
   color: gray;
 }
}
.action{
  display: flex;
  justify-content: space-around;
  box-sizing: border-box;
  align-items: center;
  .xianjia {
    color: orangered;
    padding: 5px;
  }
  .yuanjia {
    color: gray;
    text-decoration: line-through;
  }
}
}
</style>
